/* 
 * 工具页面统一样式主题
 * 用于保持所有工具页面的视觉一致性
 */

/* 基础容器样式 */
.tool-container {
	min-height: 100vh;
	padding: 32rpx;
}

.tool-content {
	padding-top: 40rpx;
}

/* 输入区域样式 */
.input-section {
	.section-title {
		display: block;
		font-size: 32rpx;
		font-weight: 500;
		color: #000000;
		margin-bottom: 32rpx;
		text-shadow: 0 1rpx 4rpx rgba(255, 255, 255, 0.6);
	}
	
	.form-item {
		margin-bottom: 32rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.form-label {
			display: block;
			font-size: 28rpx;
			color: #000000;
			margin-bottom: 16rpx;
			font-weight: 500;
		}
		
		.input-field, .textarea-field {
			width: 100%;
			height: 88rpx;
			padding: 0 24rpx;
			border: 2rpx solid #f0f0f0;
			border-radius: 12rpx;
			font-size: 28rpx;
			background-color: #fafafa;
			transition: all 0.3s ease;
			
			&:focus {
				border-color: #6A82FB;
				background-color: #ffffff;
				box-shadow: 0 0 0 4rpx rgba(106, 130, 251, 0.1);
			}
		}
		
		.textarea-field {
			min-height: 120rpx;
			padding: 16rpx;
			line-height: 1.5;
		}
	}
}

/* 选择器样式 */
.picker-display {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	padding: 0 24rpx;
	border: 2rpx solid #f0f0f0;
	border-radius: 12rpx;
	background-color: #fafafa;
	transition: all 0.3s ease;
	
	&:active {
		border-color: #6A82FB;
		background-color: #ffffff;
	}
	
	.picker-text {
		font-size: 28rpx;
		color: #000000;
	}
	
	.picker-arrow {
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
	}
}

/* 操作按钮区域 */
.action-section {
	margin: 48rpx 0;
}

/* 结果显示区域 */
.result-section {
	.section-title {
		display: block;
		font-size: 32rpx;
		font-weight: 500;
		color: #000000;
		margin-bottom: 32rpx;
		text-shadow: 0 1rpx 4rpx rgba(255, 255, 255, 0.6);
	}
}

/* 分析结果卡片 */
.analysis-card {
	padding: 32rpx;
	border-radius: 16rpx;
	margin-bottom: 24rpx;
	
	&.primary {
		background: linear-gradient(135deg, #6A82FB 0%, #FC5C7D 100%);
		color: white;
	}
	
	&.success {
		background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
		color: white;
	}
	
	&.warning {
		background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
		color: white;
	}
	
	&.info {
		background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
		color: white;
	}
	
	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
		
		.score-circle {
			width: 120rpx;
			height: 120rpx;
			border: 4rpx solid rgba(255, 255, 255, 0.3);
			border-radius: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-right: 24rpx;
			
			.score-text {
				font-size: 36rpx;
				font-weight: bold;
			}
			
			.score-unit {
				font-size: 20rpx;
				opacity: 0.8;
			}
		}
		
		.score-level {
			font-size: 24rpx;
			font-weight: 500;
			opacity: 0.9;
		}
	}
	
	.card-content {
		.desc-text {
			font-size: 28rpx;
			line-height: 1.6;
			opacity: 0.95;
		}
	}
}

/* 详情列表 */
.detail-list {
	.detail-item {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 16rpx;
		padding: 16rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.detail-label {
			font-size: 26rpx;
			color: rgba(0, 0, 0, 0.7);
			margin-right: 16rpx;
			min-width: 120rpx;
			font-weight: 500;
		}
		
		.detail-value {
			flex: 1;
			font-size: 26rpx;
			color: #000000;
			line-height: 1.5;
		}
	}
}

/* 建议列表 */
.suggestions-list {
	.suggestion-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.suggestion-icon {
			margin-right: 16rpx;
			margin-top: 4rpx;
			
			.icon-text {
				font-size: 32rpx;
			}
		}
		
		.suggestion-text {
			flex: 1;
			font-size: 28rpx;
			color: #000000;
			line-height: 1.6;
		}
	}
}

/* 网格布局 */
.info-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16rpx;
	
	.grid-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 24rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
		
		.item-label {
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.7);
			margin-bottom: 8rpx;
		}
		
		.item-value {
			font-size: 28rpx;
			font-weight: 500;
			color: #000000;
		}
	}
}

/* 标签组 */
.tag-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8rpx;
	
	.tag-item {
		padding: 8rpx 16rpx;
		background-color: #6A82FB;
		color: white;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: 500;
	}
}

/* 空状态 */
.empty-state {
	text-align: center;
	padding: 80rpx 32rpx;
	
	.empty-icon {
		font-size: 96rpx;
		margin-bottom: 24rpx;
		opacity: 0.5;
	}
	
	.empty-text {
		display: block;
		font-size: 32rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-bottom: 16rpx;
	}
	
	.empty-desc {
		display: block;
		font-size: 26rpx;
		color: rgba(0, 0, 0, 0.4);
	}
}

/* 时间范围选择 */
.time-range {
	display: flex;
	gap: 16rpx;
	
	.time-picker {
		flex: 1;
	}
}

/* 响应式调整 */
@media (max-width: 750rpx) {
	.tool-container {
		padding: 24rpx;
	}
	
	.info-grid {
		grid-template-columns: 1fr;
	}
	
	.analysis-card .card-header {
		flex-direction: column;
		text-align: center;
		
		.score-circle {
			margin-right: 0;
			margin-bottom: 16rpx;
		}
	}
}